@mixin zoom-animation($direction: "top", $scaleStart: scaleY(0), $scaleEnd: scaleY(1), $origin: center top) {
    .zoom-in-#{$direction}-enter {
        opacity: 0;
        transform: $scaleStart;
    }
    .zoom-in-#{$direction}-enter-active {
        opacity: 1;
        transform: $scaleEnd;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
            opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
        transform-origin: $origin;
    }
    .zoom-in-#{$direction}-exit {
        opacity: 1;
    }
    .zoom-in-#{$direction}-exit-active {
        opacity: 0;
        transform: $scaleStart;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
            opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
        transform-origin: $origin;
    }
}
@include zoom-animation("top", scaleY(0), scaleY(1), center top);
@include zoom-animation("left", scale(0.45, 0.45), scale(1, 1), top left);
@include zoom-animation("right", scale(0.45, 0.45), scale(1, 1), top right);
@include zoom-animation("bottom", scaleY(0), scaleY(1), center bottom);
